<template>
  <div class="login-page">
    <div class="header">
      <router-link to="/">
        <img
          src="https://s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/logo.6a89007.png"
          alt
        />
      </router-link>
    </div>
    <div class="login-wrap">
      <div class="login-banner">
        <img
          src="https://s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg"
          alt
        />
      </div>
      <div class="login">
        <div class="login-background">
          <img
            class="login-switch-img"
            src="http://p0.meituan.net/passport/025db638675721b65e16fc14dd8f3f342626.png"
          />
        </div>
        <div class="mobile-login-type">
          <div
            class="login-switch-btn"
            @click="cur = 0"
            :class="{ active: cur == 0 }"
          >
            快捷登录
          </div>
          <div
            class="login-pasword-btn"
            @click="cur = 1"
            :class="{ active: cur == 1 }"
          >
            密码登录
          </div>
        </div>
        <div class="login-tab">
          <div class="captcha" v-show="cur === 0">
            <div class="mobile-login-container">
              <div class="logincomp">
                <div class="iLoginComp-wrapper">
                  <a
                    href="https://passport.meituan.com/useraccount/countrycode?backurl=https%3A%2F%2Fpassport.meituan.com%2Fuseraccount%2Flogin%3Fservice%3Dwww%26continue%3Dhttps%253A%252F%252Fwww.meituan.com%252Faccount%252Fsettoken%253Fcontinue%253Dhttps%25253A%25252F%25252Fwh.meituan.com%25252F%26risk_partner%3D0"
                    class="country-area"
                  >
                    <span class="iLoginComp-countrycode">+86></span>
                    <i class="right-arrow"></i>
                  </a>
                </div>
                <div class="iLoginComp-phone-wrapper">
                  <input
                    class="iLoginComp-phone-num-input"
                    type="tel"
                    autocomplete="off"
                    placeholder="手机号"
                    maxlength="11"
                    style="margin-left: 60.2639px"
                    color="#d9d9d9"
                  />
                  <span></span>
                </div>
              </div>
            </div>
            <div class="iLoginComp-verify">
              <input
                class="iLoginComp-input"
                type="text"
                maxlength="6"
                placeholder="动态码"
                color="#d9d9d9"
              />
              <div class="iLoginComp-send">
                <span>获取手机动态码</span>
              </div>
            </div>
          </div>
          <div class="login-accout" v-show="cur === 1">
            <div class="mobile-login-container">
              <div class="logincomp">
                <div class="iLoginComp-wrapper">
                  <a
                    href="https://passport.meituan.com/useraccount/countrycode?backurl=https%3A%2F%2Fpassport.meituan.com%2Fuseraccount%2Flogin%3Fservice%3Dwww%26continue%3Dhttps%253A%252F%252Fwww.meituan.com%252Faccount%252Fsettoken%253Fcontinue%253Dhttps%25253A%25252F%25252Fwh.meituan.com%25252F%26risk_partner%3D0"
                    class="country-area"
                  >
                    <span class="iLoginComp-countrycode">+86></span>
                    <i class="right-arrow"></i>
                  </a>
                </div>
                <div class="iLoginComp-phone-wrapper" :rules="loginRules">
                  <input
                    class="iLoginComp-phone-num-input"
                    type="tel"
                    autocomplete="off"
                    placeholder="手机号"
                    maxlength="11"
                    style="margin-left: 60.2639px"
                    color="#d9d9d9"
                    v-model="loginForm.phone"
                  />
                  <span></span>
                </div>
              </div>
            </div>
            <div class="iLoginComp-verify">
              <input
                class="iLoginComp-input"
                type="password"
                maxlength="6"
                placeholder="密码"
                color="#d9d9d9"
                v-model="loginForm.password"
              />
            </div>
            <a class="paw-forget">忘记密码?</a>
          </div>
        </div>
        <button class="iLoginComp-login-btn" @click="handleLogin">登录</button>
        <div class="iLoginComp-user-confirm">
          <div class="iLoginComp-user-wrapper">
            <label class="iloginComp-agree">
              <input type="checkbox" class="checkbox" autocomplete="off" />
            </label>
            <div class="iLoginComp-common">
              我已阅读并同意<a
                href="https://rules-center.meituan.com/m/detail/4"
                style="color: #fe8c00"
                >《美团用户协议》、</a
              ><a
                href="https://rules-center.meituan.com/m/detail/2"
                style="color: #fe8c00"
                >《隐私政策》</a
              >，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <nav class="footer-nav">
        <router-link to="/">关于美团</router-link>
        <router-link to="/">加入我们</router-link>
        <router-link to="/">商家入驻</router-link>
        <router-link to="/">帮助中心</router-link>
        <router-link to="/">美团手机版</router-link>
      </nav>
      <p class="footer-bottom">
        ©2020 美团网团购 meituan.com 京ICP证070791号 京公网安备11010502025545号
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    return {
      cur: 0,
    };
  },
};
</script>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { loginApi } from "../../api/login/login.js";

const route = useRoute();
const router = useRouter();
const loginForm = ref({
  phone: "13700000000",
  password: "111111",
});
const getLoginInfo = async () => {
  const res = await loginApi({
    phone: 13700000000,
    password: 111111,
  });
};

const validateUserphone = (value, callback) => {
  if (value.length < 11) {
    callback(new Error("电话长度不能小于11位"));
  } else {
    callback();
  }
};
const validatePassword = (value, callback) => {
  if (value.length < 6) {
    callback(new Error("密码长度不能小于6位"));
  } else {
    callback();
  }
};
const loginRules = {
  userphone: [{ required: true, validator: validateUserphone }],
  password: [{ required: true, trigger: "blur", validator: validatePassword }],
};

const handleLogin = async () => {
  const { phone, password } = loginForm.value;
  try {
    await (phone, password);
    // 跳转到首页
    router.push("/home");
  } finally {
  }
};
</script>

<style scoped>
.login-page {
  background-color: #ffffff;
  width: 980px;
  margin: 0 auto;
}
.header {
  margin: 40px auto 30px;
}
.header img {
  width: 130px;
  height: 47px;
}
.login-wrap {
  margin-bottom: 70px;
}
.login-banner {
  float: left;
  height: 370px;
  margin: 0 115px 0 0;
  width: 480px;
}
.login {
  float: right;
  box-sizing: border-box;
  width: 378px;
  height: 475px;
  border: 5px solid #f9f9f9;
}
.logincomp {
  height: 50px;
  line-height: 50px;
}
.login-background {
  position: relative;
  float: right;
  right: 60px;
  top: 0;
  margin: 9px 9px 0 0;
}
.login-switch-img {
  position: absolute;
  width: 58px;
  height: 58px;
}
.mobile-login-type {
  margin-left: 30px;
  display: flex;
  padding-top: 50px;
  margin: 0;
  font-size: 20px;
  color: #222222;
  font-weight: 500;
  justify-content: space-around;
}

/* ------------------------------ */
.captcha {
}
/* ------------------------------ */
.paw-forget {
  float: right;
  padding: 5px 25px 10px;
  color: #fe8c00;
}
.login-switch-btn {
  flex: 1;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  border-bottom: 2px solid #ffd100;
}
.login-pasword-btn {
  flex: 1;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  border-bottom: 2px solid #e5e5e5;
}
.mobile-login-container {
  padding: 22.5px 30px 0;
  box-sizing: border-box;
  justify-content: center;
}
.iLoginComp-wrapper {
  position: absolute;
  height: 50px;
  margin-left: 12px;
  text-align: center;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 500;
  cursor: pointer;
}
.iLoginComp-phone-wrapper {
  height: 50px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
}
.iLoginComp-phone-num-input {
  background: none;
  font-size: 18px;
  border-style: none;
}
.iLoginComp-verify {
  margin-left: 30px;
  width: 308px;
  height: 50px;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14902);
  border-radius: 6px;
  box-sizing: border-box;
}
.iLoginComp-input {
  flex: 1;
  width: 160px;
  border: 0;
  font-size: 18px;
  padding-top: 15px;
  padding-left: 10px;
}
.iLoginComp-send {
  float: right;
  padding-top: 10px;
  padding-right: 10px;
  font-size: 18px;
  color: #666666;
  text-align: center;
  background: none;
}
.iLoginComp-login-btn {
  display: block;
  height: 50px;
  width: 100%;
  color: #222222;
  line-height: 50px;
  border: none;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  background-color: #ffd100;
  border-radius: 6px;
  margin-top: 20px;
  width: 318px;
  margin-left: 30px;
}
.iLoginComp-user-wrapper {
  height: 155px;
  margin-top: 30px;
  padding-top: 30px;
  margin-left: 30px;
  width: 318px;
  border-top: 1px solid #e5e5e5;
}
.checkbox {
  width: 26px;
  min-width: 26px;
}
.iLoginComp-common {
  flex: 1;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-weight: 400;
}
.iloginComp-agree {
  float: left;
}
.iLoginComp-common {
  padding-left: 30px;
}
.footer {
  width: 119opx;
  height: 125px;
  margin: 550px auto 30px;
  font-size: 12px;
  color: #999;
}
.footer-nav {
  height: 30px;
  margin-bottom: 20px;
  padding: 12px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.footer-nav a {
  float: left;
  margin: 5px 0;
  padding: 0 16px;
  line-height: 14px;
  border-right: 2px solid #c1c1c1;
}
input {
  outline: medium;
}
</style>
